<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Flink JAVA 开发培训</title>
    <link rel="stylesheet" href="/css/font-awesome-all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
            overflow: hidden;
        }

        .left-panel {
            width: 300px;
            min-width: 300px;
            background-color: #f5f5f5;
            padding: 20px;
            box-sizing: border-box;
            resize: horizontal;
            overflow: auto;
        }

        .right-panel {
            flex: 1;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            padding-top: 10px;
            box-sizing: border-box;
            background-color: #fff;
        }

        .right-panel .right-header {
            display: flex;
        }

        .right-panel .right-header .right-header-title {
            font-size: 24px;
            font-weight: bold;
            height: 60px;
            line-height: 60px;
        }

        .power-off {
            height: 30px;
            width: 30px;
            color: #e62a4e;
        }

        .right-panel .right-header .right-header-user {
            text-align: right;
            flex: 1;
            height: 60px;
            line-height: 60px;
            margin-right: 10px;
        }

        .resize-handle {
            width: 10px;
            background: #ddd;
            cursor: col-resize;
            transition: background 0.3s;
        }

        .resize-handle:hover {
            background: #4a89dc;
        }

        .menu-item {
            padding: 15px;
            margin-bottom: 10px;
            background-color: #e9e9e9;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .menu-parent {
            position: relative;
        }

        .menu-parent::after {
            content: "▶";
            position: absolute;
            right: 15px;
            transition: transform 0.3s;
        }

        .menu-parent.expanded::after {
            transform: rotate(90deg);
        }

        .sub-menu {
            margin-top: 5px;
            margin-left: 15px;
            border-left: 2px solid #ccc;
            padding-left: 5px;
            padding-top: 8px;
            padding-bottom: 8px;
        }

        .sub-menu .menu-item {
            margin-bottom: 5px;
            background-color: #f8f8f8;
        }

        #tab-header {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 10px;
        }

        .tab {
            padding: 8px 15px;
            margin-right: 5px;
            background-color: #f1f1f1;
            border-radius: 5px 5px 0 0;
            cursor: pointer;
        }

        .tab {
            position: relative;
            padding-right: 25px;
        }

        .tab.active {
            background-color: #4a89dc;
            color: white;
        }

        .close-tab {
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            padding: 0 5px;
        }

        .close-tab:hover {
            color: #ff0000;
        }

        iframe {
            width: 100%;
            height: calc(100vh - 120px);
            border: none;
            display: none;
        }

        iframe.active {
            display: block;
        }

        .menu-item:hover {
            background-color: #d9d9d9;
        }

        .menu-item.active {
            background-color: #4a89dc;
            color: white;
            font-weight: bold;
        }

        h1 {
            color: #333;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }

        iframe {
            width: 100%;
            height: calc(100vh - 80px);
            border: none;
        }

        /* 右键菜单样式 */
        .context-menu {
            position: absolute;
            display: none;
            background: white;
            border: 1px solid #ddd;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            min-width: 120px;
        }

        .context-menu-item {
            padding: 8px 15px;
            cursor: pointer;
        }

        .context-menu-item:hover {
            background-color: #f5f5f5;
        }

        .context-menu-divider {
            border-top: 1px solid #eee;
            margin: 3px 0;
        }
    </style>

<body>
    <div class="left-panel">
        <div class="menu-item" onclick="loadPage(this)" data-code="mainboard">首页</div>
        <div class="menu-item" onclick="loadPage(this)" data-code="register">初始化</div>
        <div class="menu-item" onclick="loadPage(this)" data-code="connector-test">连接器基本测试</div>
        <div class="menu-item" onclick="loadPage(this)" data-code="student-info">简单TableApi</div>

        <div class="menu-item menu-parent" onclick="toggleSubMenu(this)">
            数据流(MQTT源)
            <div class="sub-menu" style="display: none;">
                <div class="menu-item" onclick="loadPage(this)" data-code="order-management">JDBC入库</div>
                <div class="menu-item" onclick="loadPage(this)" data-code="order-agg">计算逻辑分区</div>
                <div class="menu-item" onclick="loadPage(this)" data-code="order-agg-partition">计算物理分区</div>
                <div class="menu-item" onclick="loadPage(this)" data-code="stream-watermark">窗口水印测试</div>
            </div>
        </div>
        <div class="menu-item menu-parent" onclick="toggleSubMenu(this)">
            Flink服务器
            <div class="sub-menu" style="display: none;">
                <div class="menu-item" onclick="loadPage(this)" data-code="flink-jobs">作业管理</div>
                <div class="menu-item" onclick="loadPage(this)" data-code="flink-jar">程序包管理</div>
            </div>
        </div>

        <div class="menu-item" onclick="loadPage(this)" data-code="system-config">系统配置</div>
    </div>
    <div class="resize-handle"></div>
    <div class="right-panel">
        <div class="right-header">
            <div class="right-header-title">Flink JAVA 开发培训</div>
            <div class="right-header-user" id="divUser">
                <span>用户:</span>
                <button class="power-off"><i class="fa-solid fa-power-off" onclick="logout()"></i></button>
            </div>
        </div>
        <div id="tab-container">
            <div id="tab-header">
                <div class="tab active" data-page="mainboard" data-permanent="true" onclick="showMainBoard()">
                    首页
                </div>
            </div>
            <div id="content-area">
                <iframe id="mainboard" src="/mainboard.html" class="active"></iframe>
            </div>
        </div>
    </div>
    <!-- 右键菜单 -->
    <div id="contextMenu" class="context-menu">
        <div class="context-menu-item" onclick="refreshCurrentTab()">刷新当前页</div>
        <div class="context-menu-divider"></div>
        <div class="context-menu-item" onclick="closeCurrentTab()">关闭当前页</div>
        <div class="context-menu-item" onclick="closeLeftTabs()">关闭左边</div>
        <div class="context-menu-item" onclick="closeRightTabs()">关闭右边</div>
        <div class="context-menu-item" onclick="closeOtherTabs()">关闭其他</div>
    </div>
</body>
<script src="/js/jquery-3.7.1.js"></script>
<script src="/js/pub.js"></script>
<script src="/js/font-awesome-all.min.js" data-auto-replace-svg="nest"></script>
<script>
    var openTabs = { mainboard: true };
    function toggleSubMenu(item) {
        // 只有当点击的是菜单父项本身时才切换展开状态
        if ($(event.target).hasClass('menu-parent')) {
            event.stopPropagation();
            $(item).toggleClass('expanded');
            $(item).find('.sub-menu').slideToggle();
        }
    }

    function loadPage(item) {
        const page = item.dataset.code;  // 获取页面代码

        const clickedElement = event.target; // 获取触发元素
        const title = clickedElement.textContent; // 获取标题

        // 移除所有active类
        $('.menu-item').removeClass('active');
        // 为当前点击项添加active类
        $(item).addClass('active');

        // 如果点击的是子菜单项，也激活父菜单但不收起
        if ($(item).parent().hasClass('sub-menu')) {
            const parentMenu = $(item).closest('.menu-parent');
            //parentMenu.addClass('active');
            // 确保父菜单保持展开状态
            parentMenu.addClass('expanded');
            parentMenu.find('.sub-menu').show();
        }

        // 如果标签页已存在，直接激活
        if (openTabs[page]) {
            $('.tab').removeClass('active');
            $(`.tab[data-page="${page}"]`).addClass('active');
            $('iframe').removeClass('active');
            $(`#${page}`).addClass('active');

            // 如果首页已存在但被隐藏了，确保它显示出来
            if (page === 'mainboard' && !$(`#${page}`).hasClass('active')) {
                $(`#${page}`).addClass('active');
            }
            return;
        }

        // 创建新标签页
        openTabs[page] = true;
        // 只有非永久性标签页才添加关闭按钮
        if (page !== 'mainboard') {
            $('#tab-header').append(`<div class="tab" data-page="${page}">${title}<span class="close-tab" onclick="closeTab('${page}', event)">×</span></div>`);
        } else {
            $('#tab-header').append(`<div class="tab" data-page="${page}" data-permanent="true">${title}</div>`);
        }
        $('#content-area').append(`<iframe id="${page}" src="/${page}.html"></iframe>`);

        // 激活新标签页
        $('.tab').removeClass('active');
        $(`.tab[data-page="${page}"]`).addClass('active');
        $('iframe').removeClass('active');
        $(`#${page}`).addClass('active');

        // 添加标签页点击事件
        $(document).on('click', `.tab[data-page="${page}"]`, function () {
            $('.tab').removeClass('active');
            $(this).addClass('active');
            $('iframe').removeClass('active');
            $(`#${$(this).data('page')}`).addClass('active');

            // 更新左侧菜单项激活状态
            const pageName = $(this).data('page');
            $('.menu-item').removeClass('active');
            $(`.menu-item[data-code="${pageName}"]`).addClass('active');
        });
    }

    function closeTab(page, event) {
        event.stopPropagation();

        // 永久性标签页不能关闭
        if ($(`.tab[data-page="${page}"]`).data('permanent')) {
            return;
        }

        // 如果关闭的是当前激活的标签页
        if ($(`.tab[data-page="${page}"]`).hasClass('active')) {
            // 尝试激活前一个标签页
            const prevTab = $(`.tab[data-page="${page}"]`).prev('.tab');
            if (prevTab.length) {
                prevTab.click();
            } else {
                // 如果没有前一个标签页，尝试激活后一个
                const nextTab = $(`.tab[data-page="${page}"]`).next('.tab');
                if (nextTab.length) {
                    nextTab.click();
                }
            }
        }

        // 移除标签页和iframe
        $(`.tab[data-page="${page}"]`).remove();
        $(`#${page}`).remove();
        delete openTabs[page];

        // 如果没有活动的标签页，默认激活第一个
        if ($('.tab.active').length === 0 && $('.tab').length > 0) {
            $('.tab').first().click();
        }
    }

    function closeAllTabs() {
        // 关闭所有非永久性标签页
        $('.tab').each(function () {
            if (!$(this).data('permanent')) {
                const page = $(this).data('page');
                $(`.tab[data-page="${page}"]`).remove();
                $(`#${page}`).remove();
                delete openTabs[page];
            }
        });

        // 确保首页存在且激活
        if (!$('.tab[data-page="mainboard"]').length) {
            $('#tab-header').prepend('<div class="tab active" data-page="mainboard" data-permanent="true">首页</div>');
            $('#content-area').prepend('<iframe id="mainboard" src="/mainboard" class="active"></iframe>');
            openTabs.mainboard = true;
        } else {
            $('.tab').removeClass('active');
            $('.tab[data-page="mainboard"]').addClass('active');
            $('iframe').removeClass('active');
            $('#mainboard').addClass('active');
        }

        // 重置openTabs，只保留首页
        openTabs = { mainboard: true };

        // 如果首页iframe不存在，重新创建
        if (!$('#mainboard').length) {
            $('#content-area').prepend('<iframe id="mainboard" src="/mainboard" class="active"></iframe>');
        }

        // 更新左侧菜单项激活状态
        $('.menu-item').removeClass('active');
        $(`.menu-item[onclick*="mainboard"]`).addClass('active');
    }

    function showMainBoard() {
        $('.tab').removeClass('active');
        $('[data-page="mainboard"]').addClass('active');
        $('iframe').removeClass('active');
        $("#mainboard").addClass('active');

        // 更新左侧菜单项激活状态
        const pageName = 'mainboard';
        $('.menu-item').removeClass('active');
        $(`.menu-item[onclick*="${pageName}"]`).addClass('active');
    }

    // 右键菜单功能
    let currentContextTab = null;

    // 显示右键菜单
    function showContextMenu(event, tabElement) {
        event.preventDefault();
        currentContextTab = tabElement;

        const menu = $('#contextMenu');
        menu.css({
            display: 'block',
            left: event.pageX,
            top: event.pageY
        });

        // 首页特殊处理
        if ($(tabElement).data('permanent')) {
            $('.context-menu-item').hide();
            $('.context-menu-item:contains("刷新当前页")').show();
            return;
        }

        // 显示所有菜单项
        $('.context-menu-item').show();
    }

    // 隐藏右键菜单
    function hideContextMenu() {
        $('#contextMenu').hide();
    }

    // 刷新当前标签页
    function refreshCurrentTab() {
        if (!currentContextTab) return;
        const page = $(currentContextTab).data('page');
        const iframe = $(`#${page}`)[0];
        iframe.contentWindow.location.reload();
        hideContextMenu();
    }

    // 关闭当前标签页
    function closeCurrentTab() {
        if (!currentContextTab) return;
        const page = $(currentContextTab).data('page');
        closeTab(page, { stopPropagation: function () { } });
        hideContextMenu();
    }

    // 关闭左侧标签页
    function closeLeftTabs() {
        if (!currentContextTab) return;
        const tabs = $('.tab');
        const currentIndex = tabs.index(currentContextTab);

        tabs.each(function (index) {
            if (index < currentIndex && !$(this).data('permanent')) {
                const page = $(this).data('page');
                closeTab(page, { stopPropagation: function () { } });
            }
        });
        hideContextMenu();
    }

    // 关闭右侧标签页
    function closeRightTabs() {
        if (!currentContextTab) return;
        const tabs = $('.tab');
        const currentIndex = tabs.index(currentContextTab);

        tabs.each(function (index) {
            if (index > currentIndex && !$(this).data('permanent')) {
                const page = $(this).data('page');
                closeTab(page, { stopPropagation: function () { } });
            }
        });
        hideContextMenu();
    }

    // 关闭其他标签页
    function closeOtherTabs() {
        if (!currentContextTab) return;
        const tabs = $('.tab');
        const currentPage = $(currentContextTab).data('page');

        tabs.each(function () {
            const page = $(this).data('page');
            if (page !== currentPage && !$(this).data('permanent')) {
                closeTab(page, { stopPropagation: function () { } });
            }
        });
        hideContextMenu();
    }

    function logout() {
        fetch("/security/account/logout?token=" + getLoginToken(), {
            method: "GET",
            headers: {
                "auth2045": getLoginToken()
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP 错误！状态码: ${response.status}`);
                }
                return response.json(); // 只有成功时才解析 JSON
            })
            .then(resp => {
                window.location.href = "/login";
                localStorage.removeItem("token");
            })
            .catch(err => {
                console.log(err);
                localStorage.removeItem("token");
                window.location.href = "/login";
            }
            );
    }

    // 拖动调整宽度功能
    $(document).ready(function () {
        // 点击其他地方隐藏右键菜单
        $(document).on('click', function () {
            hideContextMenu();
        });

        // 标签页右键点击事件
        $(document).on('contextmenu', '.tab', function (e) {
            showContextMenu(e, this);
        });
        const handle = document.querySelector('.resize-handle');
        const leftPanel = document.querySelector('.left-panel');
        let isDragging = false;

        handle.addEventListener('mousedown', function (e) {
            isDragging = true;
            document.body.style.cursor = 'col-resize';
            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
            e.preventDefault();
        });

        function onMouseMove(e) {
            if (!isDragging) return;
            const containerWidth = document.body.clientWidth;
            const newLeftWidth = Math.ceil((e.clientX / containerWidth) * 100);
            leftPanel.style.width = `${newLeftWidth}%`;
        }

        function onMouseUp() {
            isDragging = false;
            document.body.style.cursor = '';
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);
        }
    });

    //使用jquery的初始化方法
    $(document).ready(function () {
        // 初始化左侧菜单激活状态
        // 读取登录信息
        fetch("/security/account/getUserInfo?token=" + getLoginToken(),
            {
                method: "POST",
                headers: {
                    "auth2045": getLoginToken()
                }
            }
        )
            .then(resp => resp.json())
            .then(resp => {
                if (resp.flag == 1) {
                    $("#divUser span").html(`<span>${resp.data.loginName}</span>`);
                }
                else {
                    //$("#divUser").html(`<span></span>`);
                    window.location.href = "/login";
                }
            })
    });
</script>

</html>